<template>
  <div ref="PieChart" class="PieChart"></div>
</template>
  
<script>
import * as echarts from 'echarts'
export default {
  name: 'PieChart',
  mounted() {
    var myChart = echarts.init(this.$refs.PieChart)
    myChart.setOption({
      title: {
        text: '视频广告',
        textStyle: {
          fontSize: '16px',
          fontWeight: 500
        },
        subtext: '300',
        subtextStyle: {
          fontSize: '20px',
          color: '#000'
        },
        left: 'center',
        top: 'center'
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          tooltip: {
            trigger: 'item'
          },
          data: [
            { name: '搜索引擎', value: 1048 },
            { name: '联盟广告', value: 484 },
            { name: '直接访问', value: 735 },
            { name: '邮件营销', value: 580 },
            { name: '视频广告', value: 300 }
          ],
          itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'
          },
          label: {
            formatter: '{b}:{c}',
            fontSize: '14px'
          }
        }
      ]
    })
    myChart.on('mouseover', (params) => {
      // console.log('pieChart', params) 可以通过params.data中的数据进行参数重置
      const { name, value } = params.data
      myChart.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.PieChart {
  width: 100%;
  height: 300px;
}
</style>